<template>
	<view class="practice">
		<view style="height: 25px; width: 750rpx;  background-color:transparent;"></view>
		<my-title @back="back" :title="'章节练习'" :iSshow="false"></my-title>
		<view class="practice_content">
			<view class="content_title">
				<text :class="['title_content', !active ? 'active' : '']" @click="theory">防爆电气理论课程</text>
				<text :class="['title_content', active ? 'active' : '']" @click="practice">防爆电气实操课程</text>
			</view>
			<view class="content_list">
				<list :lists="lists" @chapter-select="chapterSelect"></list>
			</view>
		</view>

		<uni-popup ref="practisepop" :mask-click="true" type="top">
			<view style="margin-top: 50%;" class="popstyle">
				<view class="headstyle">
					<view style="width: 50%;position: absolute;text-align: center;   " @click="changeform(1)"
						:class="buttonIndex == 1?'bgcolor':'bgcolor2'">
						<text>顺序练习</text>
					</view>
					<view style="width: 50%;position: absolute;right: 0px;text-align: center; " @click="changeform1(2)"
						:class="buttonIndex == 2?'bgcolor':'bgcolor2'">
						<text>随机练习</text>
					</view>
				</view>
				<view style="padding: 20px 40px">
					<input type="text" v-if="!showornot" v-model="beginner" placeholder="请输入起始题号" />
					<input type="text" v-if="!showornot" v-model="ender" placeholder="请输入终止题号" />
					<input type="text" v-if="showornot" v-model="total" placeholder="请输入总题量" />
					<input type="text" v-if="showornot" v-model="select" placeholder="请输入选择题占比" />
				</view>
				<button @click="close" v-model="chocierate">确定</button>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import list from '../../components/courseList.vue'
	import myTitle from '../../components/title.vue'
	export default {
		data() {
			return {
				active: false,
				lists: [
					// {chapterName: '防爆电气基础知识',number: 42},
					// {chapterName: '防爆电气标准介绍',number: 42},
					// {chapterName: '爆炸危险场所分类',number: 42},

				],
				beginner: '',
				ender: '',
				select: '',
				total: '', //总数量，2021-7-13，改
				buttonIndex: 1,
				showornot: false,
				chocierate: '100%',
				token: '',
				cid: '',
				gid: 1
			}
		},
		components: {
			list,
			myTitle
		},
		methods: {
			theory() {
				this.gid = 1
				this.active = false
				this.getChapter()
			},
			chapterSelect(cid) {
				this.$refs.practisepop.open('top')
				console.log(cid)
				this.cid = cid
			},
			practice() {
				this.gid = 3
				this.active = true
				this.getChapter()
			},
			back() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			changeform(buttonIndex) {
				this.buttonIndex = buttonIndex
				this.showornot = false;
			},
			changeform1(buttonIndex) {

				this.buttonIndex = buttonIndex
				this.showornot = 'true';
			},
			close() {
				this.getQuestion()
				this.$refs.practisepop.close()
			},
			getQuestion() {
				console.log(this.token)
				if (!this.showornot) {
					if (this.beginner.trim().length === 0 || this.ender.trim().length === 0) {
						uni.showToast({
							title: '请输入起始题号和终止题号！',
							icon: 'none'
						})
					} else {
						uni.request({
							url: 'http://exam.tutestudio.net/api/student/question',
							method: 'POST',
							data: {
								start: parseInt(this.beginner),
								end: parseInt(this.ender),
								cid: parseInt(this.cid)
							},
							header: {
								token: this.token
							},
							success: (res) => {
								if (res.data.statusCode !== 200) {
									uni.showToast({
										title: res.data.errors,
										icon: 'none'
									})
									return;
								}
								console.log(res.data.data)
								uni.setStorageSync('exercises', JSON.stringify(res.data.data))
								uni.removeStorageSync('selectData')
								uni.removeStorageSync('onlySelectData')
								uni.navigateTo({
									url: '/pages/examnation/examlist/matter'
								})
							},
							fail(err) {
								uni.showToast({
									title: '接口参数有误！',
									icon: 'none'
								})
							}
						})

					}
				} else {

					if (this.total.trim().length === 0 || this.select.trim().length === 0) {
						uni.showToast({
							title: '请输入总题量！',
							icon: 'none'
						})
					} else {

						uni.request({
							url: 'http://exam.tutestudio.net/api/student/questionRandom',
							method: 'POST',
							data: {
								total: parseInt(this.total),
								judge: parseInt(this.select),
								cid: parseInt(this.cid)
							},
							header: {
								token: this.token
							},
							success: (res) => {
								if (res.data.statusCode !== 200) {
									uni.showToast({
										title: res.data.errors,
										icon: 'none'
									})
									return;
								}
								console.log(res.data.data)
								uni.setStorageSync('exercises', JSON.stringify(res.data.data))
								uni.navigateTo({
									url: '/pages/examnation/examlist/matter'
								})
							},
							fail(err) {
								uni.showToast({
									title: '接口参数有误！',
									icon: 'none'
								})
							}
						})
					}

				}

			},
			getChapter() {
				uni.request({
					url: 'http://exam.tutestudio.net/api/student/chapter?cid=' + this.gid,
					method: 'GET',
					header: {
						token: this.token
					},
					success: (res) => {
						if (res.data.statusCode !== 200) {
							uni.showToast({
								title: res.data.errors,
								icon: 'none'
							})
						}
						this.lists = res.data.data
						console.log(this.lists)
					},
					fail(err) {
						uni.showToast({
							title: '接口参数有误！',
							icon: 'none'
						})
					}
				})
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.token = uni.getStorageSync('token')
			if (!this.token) {
				uni.navigateTo({
					url: '../loginpage/loginpage'
				})
				return;
			}
			this.getChapter()
		},
		mounted() {

		}
	}
</script>


<style lang="scss" scoped>
	.practice {
		width: 750rpx;
		height: 100vh;

		.practice_content {
			width: 100%;
			margin-top: 20px;

			.content_title {
				height: 80rpx;
				width: 700rpx;
				display: flex;
				justify-content: space-between;
				line-height: 80rpx;

				.title_content {
					font-size: 17px;
					flex: 1;
					text-align: center;
					margin-left: 25rpx;
					color: black;
				}

				.active {
					color: #3C86FD;
					font-weight: 800;

				}
			}

			.content_list {
				margin: 20px 20px;
			}
		}
	}

	.popstyle {
		position: relative;
		width: 280px;
		height: 272px;
		background-color: white;
		margin: 0 auto;
		border-radius: 10px;
		overflow: hidden;

		input {
			border-bottom: 1px solid rgba(1, 1, 1, 0.3);
			width: 200px;
			height: 32px;
			margin-bottom: 8px;
		}

		button {
			width: 185px;
			height: 40px;
			border-radius: 5px;
			color: white;
			margin: 0, auto;
			background-color: #3C86FD
		}
	}

	.headstyle {
		display: block;
		height: 50px;
		width: 100%;
		line-height: 50px;
		background-color: silver;
		border-radius: 10px;
	}

	.bgcolor {
		color: #3C86FD;
		background-color: white;
		border: 0;
		outline: none;
	}

	.bgcolor2 {

		color: black;
		background-color: white;
		border: 0;
		outline: none;
	}

	button:focus {
		outline: 0;
	}
</style>
